<script>
export default {
  name: "Myscheduling",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 科室数据
      deptOptions: [],
      // 用户数据
      userOptions: [],
      // 排班时间段字典
      subsectionTypeOptions: [],
      // 排班类型字典
      schedulingTypeOptions: [],
      queryParams: {
        userId: null // 当前用户ID
      },
      // 查询条件
      schedulingData: {
        startTimeThisWeek: undefined,
        endTimeThisWeek: undefined
      },
      // 排班表的数据   应该从后台查询
      tableData: [],
      // 表头数据
      labelNames: ['', '', '', '', '', '', ''],
      userList: {} // 当前用户信息
    }
  },
  created() {
    this.loadUser();
    this.loadDept();
    this.loadUsers();
    this.listSubsectionType();
    this.listSchedulingType();
  },
  methods: {
    loadUser() {
      // 获取当前用户信息
      this.$http.get("/system/user/info").then(resp => {
        this.userList = resp.data.data;
        // 设置查询参数中的用户ID
        this.queryParams.userId = this.userList.userId;
        // 加载排班信息
        this.listScheduling();
      });
    },
    listSchedulingType() {
      this.$http.get("/system/dict/data/type/his_scheduling_type").then(resp => {
        this.schedulingTypeOptions = resp.data.data;
      });
    },
    listSubsectionType() {
      this.$http.get("/system/dict/data/type/his_subsection_type").then(resp => {
        this.subsectionTypeOptions = resp.data.data;
      });
    },
    listScheduling() {
      if (!this.queryParams.userId) {
        console.error("用户ID未设置");
        return;
      }
      this.$http.post("/doctor/scheduling/selectScheduling", this.queryParams).then(resp => {
        this.schedulingData.startTimeThisWeek = resp.data.data.startTimeThisWeek;
        this.schedulingData.endTimeThisWeek = resp.data.data.endTimeThisWeek;
        this.tableData = resp.data.data.schedulingDtos;
        this.labelNames = resp.data.data.labelNames;
      }).catch(error => {
        console.error("获取排班信息失败", error);
      });
    },
    loadDept() {
      this.$http.get("/system/dept/list").then(resp => {
        this.deptOptions = resp.data.data;
      });
    },
    loadUsers() {
      this.$http.get("/system/user/listAll").then(resp => {
        this.userOptions = resp.data.data;
      });
    },
    handleQuery() {
      this.listScheduling();
    },
    resetQuery() {
      this.resetForm('queryForm');
      this.listScheduling();
    },
    upWeek() {
      this.queryParams.queryDate = this.schedulingData.startTimeThisWeek;
      this.listScheduling();
    },
    currentWeek() {
      this.queryParams.queryDate = undefined;
      this.listScheduling();
    },
    nextWeek() {
      this.queryParams.queryDate = this.schedulingData.endTimeThisWeek;
      this.listScheduling();
    },
    userFormatter(row) {
      let name = '';
      this.userOptions.forEach(item => {
        if (row.userId === item.userId) {
          name = item.userName;
        }
      });
      return name;
    },
    deptFormatter(row) {
      let name = '';
      this.deptOptions.forEach(item => {
        if (row.deptId === item.deptId) {
          name = item.deptName;
        }
      });
      return name;
    },
    subsectionTypeFormatter(row) {
      let name = "";
      this.subsectionTypeOptions.forEach(item => {
        if (item.dictValue == row.subsectionType) {
          name = item.dictLabel;
        }
      });
      return name;
    },
    schedulingTypeDay1Formatter(row) {
      let name = "";
      this.schedulingTypeOptions.forEach(item => {
        if (item.dictValue == row.schedulingType[0]) {
          name = item.dictLabel;
        }
      });
      return name;
    },
    schedulingTypeDay2Formatter(row) {
      let name = "";
      this.schedulingTypeOptions.forEach(item => {
        if (item.dictValue == row.schedulingType[1]) {
          name = item.dictLabel;
        }
      });
      return name;
    },
    schedulingTypeDay3Formatter(row) {
      let name = "";
      this.schedulingTypeOptions.forEach(item => {
        if (item.dictValue == row.schedulingType[2]) {
          name = item.dictLabel;
        }
      });
      return name;
    },
    schedulingTypeDay4Formatter(row) {
      let name = "";
      this.schedulingTypeOptions.forEach(item => {
        if (item.dictValue == row.schedulingType[3]) {
          name = item.dictLabel;
        }
      });
      return name;
    },
    schedulingTypeDay5Formatter(row) {
      let name = "";
      this.schedulingTypeOptions.forEach(item => {
        if (item.dictValue == row.schedulingType[4]) {
          name = item.dictLabel;
        }
      });
      return name;
    },
    schedulingTypeDay6Formatter(row) {
      let name = "";
      this.schedulingTypeOptions.forEach(item => {
        if (item.dictValue == row.schedulingType[5]) {
          name = item.dictLabel;
        }
      });
      return name;
    },
    schedulingTypeDay7Formatter(row) {
      let name = "";
      this.schedulingTypeOptions.forEach(item => {
        if (item.dictValue == row.schedulingType[6]) {
          name = item.dictLabel;
        }
      });
      return name;
    },
    spanMethod(data) {
      const { row, rowIndex, columnIndex } = data;
      if (columnIndex < 2 || columnIndex > 9) {
        const len = this.userGroup(row.userId);
        const lenName = this.userIdLen(row.userId);
        if (rowIndex === lenName) {
          return {
            rowspan: len,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        };
      }
    },
    userGroup(name) {
      return this.tableData.filter(o => o.userId === name).length;
    },
    userIdLen(name) {
      const tmp = Array.from(this.groupNum);
      const index = tmp.indexOf(name);
      let len = 0;
      for (let i = 0; i < index; i++) {
        len += this.userGroup(tmp[i]);
      }
      return len;
    }
  },
  computed: {
    groupNum() {
      return new Set(this.tableData.map(o => o.userId));
    }
  }
}
</script>


<template>
  <div class="app-container">
    <!-- 查询条件开始 -->
    <el-row :gutter="12" style="margin-bottom:5px">
      <el-col :span="24">
        <el-card>
          <el-form :inline="true" label-width="68px">
            <el-form-item style="float:right">
              <el-button type="primary" icon="el-icon-plus" size="small" @click="upWeek()">上一周</el-button>
              <el-button type="success" icon="el-icon-s-operation" size="small" @click="currentWeek()">当前周
              </el-button>
              <el-button type="primary" icon="el-icon-plus" size="small" @click="nextWeek()">下一周</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>


    <!-- 时间范围开始 -->
    <el-row :gutter="12" style="margin-bottom:5px">
      <el-col :span="24">
        <el-card>
          <div style="text-align:center">
            <span>{{ schedulingData?.startTimeThisWeek }}(周一)</span>-<span>{{
              schedulingData?.endTimeThisWeek
            }}(周日)</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 时间范围结束 -->

    <!-- 排班表格开始 -->
    <el-table v-loading="loading" :data="tableData" border :span-method="spanMethod">
      <el-table-column prop="userId" label="医生" align="center" :formatter="userFormatter"/>
      <el-table-column prop="deptId" label="科室" align="center" :formatter="deptFormatter"/>
      <el-table-column prop="subsectionType" label="时间/日期" align="center" :formatter="subsectionTypeFormatter"/>
      <el-table-column prop="schedulingType[0]" :label="labelNames[0]" align="center"
                       :formatter="schedulingTypeDay1Formatter"/>
      <el-table-column prop="schedulingType[1]" :label="labelNames[1]" align="center"
                       :formatter="schedulingTypeDay2Formatter"/>
      <el-table-column prop="schedulingType[2]" :label="labelNames[2]" align="center"
                       :formatter="schedulingTypeDay3Formatter"/>
      <el-table-column prop="schedulingType[3]" :label="labelNames[3]" align="center"
                       :formatter="schedulingTypeDay4Formatter"/>
      <el-table-column prop="schedulingType[4]" :label="labelNames[4]" align="center"
                       :formatter="schedulingTypeDay5Formatter"/>
      <el-table-column prop="schedulingType[5]" :label="labelNames[5]" align="center"
                       :formatter="schedulingTypeDay6Formatter"/>
      <el-table-column prop="schedulingType[6]" :label="labelNames[6]" align="center"
                       :formatter="schedulingTypeDay7Formatter"/>
    </el-table>
    <!-- 排班表格结束 -->

  </div>

</template>

<style scoped>

</style>
